<template>
	<view class="page-body" :style="'height:'+height+'px'">
		<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop"
		 scroll-with-animation>
			<view class="nav-left-item" @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'active':''"
			 v-for="(item,index) in classifyData">
				{{item.name}}
			</view>
		</scroll-view>
		<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'"
		 scroll-with-animation>
			<view v-for="(foods,index) in classifyData" :key="index" class="box">
				<view class="nav_title">
					<view class="nav_text">{{foods.name}}</view>

				</view>
				<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in foods.undefined" :key="i" @click="cart(item.name)">
					<view class="nav_list_box">
						<image :src="item.propaganda[0].url" />
						<view class="list_right">
							<view class="list_name">{{item.name}}</view>
							<view class="list_brief">
								{{item.bewrite}}
							</view>
							<view class="list_price">
								<view class="price_txt">
									¥{{item.price}}
								</view>
								<view class="icon iconfont iconche list_cart">

								</view>
							</view>
						</view>

					</view>

				</view>
			</view>
		</scroll-view>
		<loading :ifloading='ifloa'></loading>
	</view>
</template>

<script>
		import loading from '../../components/loading/loading';
	export default {
		components: {
			loading
		},
		data() {
			return {
				ifloa:true,
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				classifyData: [],
				arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672, 7017], //初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0, //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				goodsItem: [],
				ids: []
			}
		},
		created() {
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })

		},
		onLoad: function(option) {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
			//分类
		},
		onUnload:function(){
			
		},
		onHide:function(){
			this.categoryClickMain(0)
		},
		onShow:function(){
			this.categoryClickMain(this.$store.state.index)
		},
		onReady() {
			// this.getHeightList();
			
		},
		mounted() {
			// console.log("vuex",this.$store.state.index)
			var _this = this
			this.ifloa= true
			var pro = new Promise(function(resolve, reject) {
				_this.https('h5/nottoken/getAllClass', 'GET') //(请求地址,请求类型,数据)
					.then(res => {
						_this.ids = []
						_this.classifyData = res.data.data.class
						for (let i = 0; i < _this.classifyData.length; i++) {
							_this.ids.push(_this.classifyData[i].id)
						}
						resolve(_this.ids)
					})
			}).then(function(res) {
				for (let i = 0; i < res.length; i++) {
					_this.https('h5/nottoken/getOneAllGoods', 'GET', {
							id: res[i]
						}) //(请求地址,请求类型,数据)
						.then(ress => {
							// console.log("???",_this.classifyData,res)
							ress.data.data.forEach(item => {
								item.propaganda = JSON.parse(item.propaganda)
							})
							for (let j = 0; j < _this.classifyData.length; j++) {
								if (_this.classifyData[j].id == res[i]) {
									_this.$set(_this.classifyData[j], _this.classifyData[j].goods, ress.data.data);
								}
							}
							_this.$nextTick(() => {
								_this.getHeightList();
								// _this.categoryClickMain(_this.$store.state.index)
							})
							_this.ifloa= false
						})
						
						
				}
			
				console.log("循环数据", _this.classifyData)


			}).catch((e) => {
				console.log("eee", e)
			})
		},
		methods: {
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight = rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * _this.classifyData.length;
					_this.diff = _this.navLeftHeight - _this.height;
				});





				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect) {
						// 					rect.id      // 节点的ID
						// 					rect.dataset // 节点的dataset
						// 					rect.left    // 节点的左边界坐标
						// 					rect.right   // 节点的右边界坐标
						// 					rect.top     // 节点的上边界坐标
						// 					rect.bottom  // 节点的下边界坐标
						// 					rect.width   // 节点的宽度
						// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
					})
					_this.arr = arr
				}).exec()
			},
			scroll(e) {
				let _this = this
				if (this.timeoutId) {
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function() { //节流
					_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length; i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i + 1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
								_this.$store.commit('handClassIndex',i)
							_this.categoryActive = i;
							(_this.diff > 0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff) / (_this.classifyData
								.length - 1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.$store.commit('handClassIndex',0)
					_this.timeoutId = undefined;
				}, 10)
			},
			categoryClickMain(index) {
				this.$store.commit('handClassIndex',index)
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop + 1 : this.scrollTop = this.arr[index] //防止两次相等造成点击不触发滚动时间
			},
			cart: function(text) {
				uni.showToast({
					title: text,
					icon: "none",
				})
			}
		},
		components: {}
	}
</script>
<style lang="scss">
	.nav_list_box {
		display: flex;

		.list_right {
			margin-left: 24upx;
			width: 205px;
			height: 135px;
			padding: 12px 10px 0 11px;
			box-sizing: border-box;


			.list_name {
				// font-size: 28upx;
			}

			.list_brief {
				margin-top: 16upx;
				margin-bottom: 16upx;
				color: #8c8c8c;
				font-size: 11px;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //用省略号显示
				white-space: nowrap;
			}

			.list_price {
				padding: 16upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.price_txt {
					font-size: 14px;
					line-height: 18px;
					color: #ff4f67;
					font-weight: 600;

				}

				.list_cart {
					width: 30px;
					height: 30px;
					display: inline-block;
					background: #47c470;
					color: #fff;
					font-size: 15px;
					text-align: center;
					line-height: 30px;
					border-radius: 15px;
				}
			}

		}
	}

	.nav_title {
		padding: 32upx;

		.nav_text {
			border-bottom: 1px solid #efefef;
			padding-bottom: 32upx;
		}
	}

	.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		/* font-size: 30upx; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 75%;
	}

	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		min-height: 100vh;
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		min-height: 100vh;
	}

	.nav-right-item {
		width: 100%;
		height: 220upx;
		float: left;
		text-align: center;
		padding: 11upx;
		/* font-size: 28upx; */
		background: #fff;
	}

	.nav-right-item image {
		width: 150upx;
		height: 150upx;
	}

	.active {
		color: #FF80AB;
		background: #fff;
		border-right: 0;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
